<script type="text/javascript" src="path/to/codemirror.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-codemirror.js"></script>
<script type="text/javascript" src="path/to/codemirror/{some-resources}"></script>
<!-- Include the Codemirror library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Codemirror JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-codemirror@4.0.0/dist/vue-codemirror.js"></script>
<!-- Codemirror Libs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/merge/merge.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/selection/active-line.min.js"></script>
<!-- Google diff match patch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
<script>
    window.DIFF_DELETE = -1
    window.DIFF_INSERT = 1
    window.DIFF_EQUAL = 0
</script>
<!-- Include stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/merge/merge.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/theme/monokai.min.css" rel="stylesheet">

<div id="vueapp">
    <p>{{ message }}</p>
    <br>
    <codemirror
            ref="cm"
            v-model="code"
            :options="cmOption"
            @blur="onCmBlur($event)"
            @focus="onCmFocus($event)"
            @ready="onCmReady($event)"
    ></codemirror>
    <br>
    <codemirror
            ref="cmMerge"
            :merge="true"
            :options="cmMergeOption"
    ></codemirror>
    <br>
</div>
<script>
    Vue.use(VueCodemirror)

    new Vue({
        el: '#vueapp',
        data: {
            message: 'Hi from Vue.',
            code: `const test = 'vue-codemirror' \n`,
            cmOption: {
                tabSize: 4,
                styleActiveLine: true,
                lineNumbers: true,
                mode: 'text/javascript',
                theme: "monokai"
            },
            cmMergeOption: {
                value: 'const a = 10;\nconst b = 20;',
                orig: 'const a = 10;\nconst b = 230;',
                origLeft: null,
                connect: 'align',
                mode: 'text/javascript',
                lineNumbers: true,
                collapseIdentical: false,
                highlightDifferences: true
            }
        },
        methods: {
            onCmBlur(cm) {
                console.log('cm blur!', cm)
            },
            onCmFocus(cm) {
                console.log('cm focus!', cm)
            },
            onCmReady(cm) {
                console.log('cm ready!', cm)
            }
        },
        computed: {
            cm() {
                return this.$refs.cm.codemirror
            },
            cmMerge() {
                return this.$refs.cmMerge.codemirror
            }
        },
        mounted() {
            console.log('the codemirror instance object', this.cm, 'cmMerge', this.cmMerge)
        }
    })
</script>